<template>
  <div class="addGoods">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin: 20px 0;">
      <el-alert title="添加商品信息" type="info" center show-icon></el-alert>
    </el-row>
    <el-steps :active="activeIndex" align-center>
      <el-step v-for="(item, index) in goodsParams" :key="index" :title="item.label"></el-step>
    </el-steps>
    <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick" style="min-height: 200px;">
        <el-tab-pane v-for="(item, index) in goodsParams" :key="index" :label="item.label" :name="item.name">

        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
        tabPosition: 'left',
        goodsParams: [
            {
                label: '基本信息',
                name: 'first'
            },{
                label: '商品参数',
                name: 'second'
            },{
                label: '商品属性',
                name: 'third'
            },{
                label: '商品图片',
                name: 'fourth'
            },{
                label: '商品内容',
                name: 'five'
            }
        ],
        activeName: 'first',
        activeIndex: 1
    };
  },
  methods: {
      handleClick(tab) {
          this.activeIndex = +tab.index + 1
      }
  }
};
</script>

<style scoped lang="scss">
.addGoods {
  background: #fff;
  border-radius: 5px;
  padding: 15px;
}
</style>
